<!DOCTYPE html>
    <!--
    /*******************************************************************************
    #      ____               __          __  _      _____ _       _               #
    #     / __ \              \ \        / / | |    / ____| |     | |              #
    #    | |  | |_ __   ___ _ __ \  /\  / /__| |__ | |  __| | ___ | |__   ___      #
    #    | |  | | '_ \ / _ \ '_ \ \/  \/ / _ \ '_ \| | |_ | |/ _ \| '_ \ / _ \     #
    #    | |__| | |_) |  __/ | | \  /\  /  __/ |_) | |__| | | (_) | |_) |  __/     #
    #     \____/| .__/ \___|_| |_|\/  \/ \___|_.__/ \_____|_|\___/|_.__/ \___|     #
    #           | |                                                                #
    #           |_|                 _____ _____  _  __                             #
    #                              / ____|  __ \| |/ /                             #
    #                             | (___ | |  | | ' /                              #
    #                              \___ \| |  | |  <                               #
    #                              ____) | |__| | . \                              #
    #                             |_____/|_____/|_|\_\                             #
    #                                                                              #
    #                              (c) 2010-2011 by                                #
    #           University of Applied Sciences Northwestern Switzerland            #
    #                     Institute of Geomatics Engineering                       #
    #                           martin.christen@fhnw.ch                            #
    ********************************************************************************
    *     Licensed under MIT License. Read the file LICENSE for more information   *
    *******************************************************************************/

                          TUTORIAL 1: Creating a virtual globe
    *******************************************************************************/
    -->
    <html lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script type="text/javascript" src="../../../external/closure-library/closure/goog/base.js"></script>
    <script type="text/javascript" src="../../../compiled/deps.js"></script>
    <script type="text/javascript">goog.require('owg.OpenWebGlobe');</script>
    <!--
    <script type="text/javascript" src="../../../compiled/owg-optimized.js"></script>
    -->
    <script type="text/javascript">

    //------------------------------------------------------------------------------
    // called every frame:
    function OnRender(context)
    {

    }
    //------------------------------------------------------------------------------

    function main()
    {
        // (0) Set location of Artwork directory. Make sure CORS is enabled.
        //     (Header: Access-Control-Allow-Origin: "*")
        ogSetArtworkDirectory("http://www.openwebglobe.org/art/");

        // (1) create an OpenWebGlobe context using canvas
        // first parameter is canvas-id and second is "fullscreen"
        var ctx = ogCreateContextFromCanvas("canvas", true);

        // (2) Create a virtual globe
        var globe = ogCreateGlobe(ctx);

        // (3) Add an image and an elevation layer

        var image =
        {
            url     : ["http://tile1.openwebglobe.org/mapcache/owg",
                        "http://tile2.openwebglobe.org/mapcache/owg",
                        "http://tile3.openwebglobe.org/mapcache/owg"],
            layer   : "world",
            service : "owg"
        };

        var elevation =
        {
            url     : ["http://tile1.openwebglobe.org/mapcache/owg",
                        "http://tile2.openwebglobe.org/mapcache/owg",
                        "http://tile3.openwebglobe.org/mapcache/owg"],
            layer   : "srtm",
            service : "owg"
        };


        var pointcloud =
        {

            url     : ["http://server"],
            layer   : "16",
            minlod  : 17,
            maxlod  : 20,
            service : "owg"
        };

        ogAddImageLayer(globe, image);
        ogAddElevationLayer(globe, elevation);
        ogAddPointCloudLayer(globe, pointcloud);
        //ogHideElevationOnPointCloud(globe, true);

        // (4) Set the "Render-Callback" function.
        // The callback function will be called everytime a frame is drawn.
        ogSetRenderFunction(ctx, OnRender);

        // (5) Set the background color
        ogSetBackgroundColor(ctx, 0.2,0.2,0.7,1.0);
    }
    //------------------------------------------------------------------------------

        </script>

    </head>
    <body onload="main()" style="padding:0px; margin:0px; overflow:hidden;">
        <div style="text-align: center">
            <canvas id="canvas"></canvas>
        </div>
    </body>
</html>
